<template>
  <div class="main">
    <!-- 头部输入框 -->
    <el-form :model="queryParams" size="small" :inline="true">
      <el-form-item label="活动类型">
        <el-select
          v-model="value"
          clearable
          placeholder="请选择"
          @change="changeStatus"
        >
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="tableDataStatus"
      style="width: 100%"
      :row-style="{ height: '180px' }"
    >
      <el-table-column
        label="活动名称"
        width="300"
        prop="activityName"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="activityPlace"
        label="活动地点"
        width="140"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="participants"
        label="参会人员"
        width="200"
        align="center"
      >
      </el-table-column>

      <el-table-column prop="activityContent" label="活动内容" align="center">
      </el-table-column>

      <el-table-column label="活动类型" align="center">
        <template slot-scope="scope">
          {{ judgeActive(scope.row.activityType) }}
        </template>
      </el-table-column>

      <el-table-column prop="score" label="活动分值" width="90" align="center">
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        v-if="value != 2"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="getRegistration1(scope.row)"
            >已审批</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="getRegistration0(scope.row)"
            >未审批</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 活动具体审批状况（已审批） -->
    <el-dialog title="已审批" :visible.sync="dialogTableVisible1">
      <el-row class="btn">
        <el-button
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="cancelApproval"
          >取消审批</el-button
        >
      </el-row>

      <el-table
        :data="tableDataApproval1"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          property="realName"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column
          property="studentId"
          label="学号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="studentGrade"
          label="年级"
          width="150"
        ></el-table-column>
        <el-table-column
          property="studentMajor"
          label="专业"
          width="150"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="cancelApproval(scope.row)"
              >取消审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 活动具体审批状况（未审批） -->
    <el-dialog title="未审批" :visible.sync="dialogTableVisible0">
      <el-row class="btn">
        <el-button
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="forApproval"
          >审批</el-button
        >
      </el-row>
      <el-table
        :data="tableDataApproval0"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          property="realName"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column
          property="studentId"
          label="学号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="studentGrade"
          label="年级"
          width="150"
        ></el-table-column>
        <el-table-column
          property="studentMajor"
          label="专业"
          width="150"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="forApproval(scope.row)"
              >审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  getActivityStatus,
  getRegistrationApproval,
  getActivityApproval,
} from "@/api/actionApproval/approval";
export default {
  data() {
    return {
      // 活动id
      activeId: null,
      // 对话框是否显示（已审批）
      dialogTableVisible1: false,
      // 对话框是否显示（未审批）
      dialogTableVisible0: false,
      // 活动类型更改时
      value: 0,
      // 选中数组(存放选中的学生的学号)
      ids: [],
      // 选中数组(存放选中的学生的名字)
      names: [],
      // 存放活动信息
      tableData: [],
      // 存放活动不同状态时信息
      tableDataStatus: [],
      // 存放根据活动id查询活动报名审批情况(已审批)
      tableDataApproval1: [],
      // 存放根据活动id查询活动报名审批情况(未审批)
      tableDataApproval0: [],
      //   // 存放未开始活动信息
      //   tableDataAlready: [],
      //   // 存放正在进行中活动信息
      //   tableDataGoing: [],
      // 存放已结束活动信息
      //   tableDataFinish: [],
      // 活动状态
      status: [
        {
          label: "未开始",
          value: 0,
        },
        {
          label: "正在进行",
          value: 1,
        },
        {
          label: "已结束",
          value: 2,
        },
      ],
      // 活动类型
      type: [
        {
          label: "Sunday学习日",
          value: "0",
        },
        {
          label: "其他",
          value: "1",
        },
      ],
      // 查询表单
      queryParams: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getActivityStatus().then((res) => {
        this.tableData = res.data;
        this.tableDataStatus = this.tableData[0];
      });
    },
    getListRegistration(activityId) {
      getRegistrationApproval(activityId).then((res) => {
        this.tableDataApproval1 = res.data["1"];
        this.tableDataApproval0 = res.data["0"];
      });
    },
    // 选择活动类型时
    changeStatus() {
      this.tableDataStatus = this.tableData[this.value];
    },
    // 判断活动类型
    judgeActive(value1) {
      for (let i = 0; i < this.type.length; i++) {
        if (value1 == this.type[i].value) {
          return this.type[i].label;
        }
      }
    },
    // 查看审批状况(已审批)
    getRegistration1(row) {
      this.activeId = row.id;
      this.getListRegistration(row.id);
      this.dialogTableVisible1 = true;
    },
    // 查看审批状况(未审批)
    getRegistration0(row) {
      this.activeId = row.id;
      this.getListRegistration(row.id);
      this.dialogTableVisible0 = true;
    },
    // 取消审批
    cancelApproval(row) {
      let roleIds = row.studentId || this.ids;
      if (typeof roleIds === "string") {
        roleIds = [roleIds];
      }
      getActivityApproval(this.activeId, roleIds, 1).then((res) => {
        this.getListRegistration(this.activeId);
        this.$modal.msgSuccess("取消审批成功");
        roleIds = undefined;
      });
    },
    // 进行审批
    forApproval(row) {
      let roleIds = row.studentId || this.ids;
      if (typeof roleIds === "string") {
        roleIds = [roleIds];
      }
      getActivityApproval(this.activeId, roleIds, 0).then((res) => {
        this.getListRegistration(this.activeId);
        this.$modal.msgSuccess("审批成功");
        roleIds = undefined;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.studentId);
      this.names = selection.map((item) => item.realName);
    },
  },
};
</script>

<style scoped>
.main {
  margin: 20px;
}
</style>